Теория относительности путей

Существует два типа путей: абсолютные и относительные. Давайте рассмотрим, как они работают.

Абсолютные пути

Абсолютный путь указывает полный URL-адрес ресурса, начиная с протокола (например, http:// или https://) и доменного имени. Этот путь всегда ссылается на один и тот же ресурс, независимо от того, где находится HTML-документ.

Пример:

<img src="https://example.com/images/logo.png" alt="Логотип">
  • В этом примере абсолютный путь ведёт к ресурсу по полному URL-адресу: https://example.com/images/logo.png.
  • Абсолютный путь полезен, когда ресурс находится на внешнем сайте или если нужно ссылаться на него из любого места.

Относительные пути

Относительный путь указывает путь к файлу относительно местоположения HTML-документа. Эти пути зависят от того, где находятся файлы на сервере.

Виды относительных путей:

a) Относительный путь от текущего местоположения (тот же каталог)

Если файл находится в том же каталоге, что и HTML-документ, просто укажите имя файла.

<img src="logo.png" alt="Логотип">
  • В этом примере logo.png находится в том же каталоге, что и HTML-файл.

b) Относительный путь к дочернему каталогу

Если файл находится в подкаталоге, указывайте путь от текущего местоположения к этому подкаталогу.

<img src="images/logo.png" alt="Логотип">
  • В этом примере файл logo.png находится в подкаталоге images относительно текущего HTML-документа.

c) Относительный путь к родительскому каталогу

Если файл находится на уровне выше, можно использовать символы .. для перехода на уровень вверх.

<img src="../logo.png" alt="Логотип">
  • В этом примере .. указывает на родительский каталог. HTML-файл находится в подкаталоге, и мы поднимаемся на уровень вверх для доступа к файлу logo.png.

d) Относительный путь к корневому каталогу

Чтобы указать путь относительно корневого каталога сайта, используйте / в начале пути. Это часто используется для обращения к файлам, расположенным в корневой директории сайта.

<img src="/images/logo.png" alt="Логотип">
  • В этом примере файл logo.png находится в каталоге images, который расположен в корневом каталоге сайта. Путь начинается с /, что указывает на корень сайта.

Примеры использования путей

Стили и скрипты:

<link rel="stylesheet" href="styles/style.css" type="text/css">  <!-- Относительный путь -->
<script src="https://cdn.example.com/scripts/script.js"></script> <!-- Абсолютный путь -->

Ссылки:

<a href="about.html">О нас</a> <!-- Относительный путь -->
<a href="https://example.com">Главная страница</a> <!-- Абсолютный путь -->

Когда использовать абсолютные и относительные пути

  • Абсолютные пути хороши для ссылки на ресурсы, которые находятся на других веб-сайтах или когда нужно быть уверенным, что ссылка не изменится независимо от местоположения HTML-документа.
  • Относительные пути используются для ссылок на файлы, которые находятся на том же сервере и меняются в зависимости от местоположения HTML-документа.

Практические советы

  • Относительные пути более гибкие для работы в проектах, так как они зависят от структуры каталогов и позволяют перемещать проект, не меняя все ссылки.
  • Абсолютные пути необходимы для работы с внешними ресурсами (например, с изображениями или скриптами на сторонних сайтах).